import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'
import '../Assets/home.css'

const SearchInput = () => {
  const navigate = useNavigate()

  const [keywords, setKeywords] = useState("")
  const [data, setData] = useState([
    { id: 1, name: "华为畅享70" },
    { id: 2, name: "HUAWEI Mate 60 RS 非凡大师" },
    { id: 3, name: "HUAWEI Mate 60 Pro+" },
    { id: 4, name: "HUAWEI Mate 60 Pro" },
    { id: 5, name: "HUAWEI Mate 60" },
    { id: 6, name: "HUAWEI nova 11 SE" },
    { id: 7, name: "HUAWEI P60 Art" },
    { id: 8, name: "HUAWEl nova 11" },
    { id: 9, name: "HUAWEI MateBook X i5" },
    { id: 10, name: "HUAWEI MateBook X Pro 2023 微绒典藏版" },
    { id: 11, name: "HUAWEI MateBook 14 2023" },
    { id: 12, name: "HUAWEI MateBook 13s 2023" },
    { id: 13, name: "HUAWEI MateBook 14s 2022" },
    { id: 14, name: "HUAWEI Mate Book 16s 2023" },
    { id: 15, name: "HUAWEI MateBook D 14 SE版 2024" },
    { id: 16, name: "HUAWEI MateBook D 14 2023" },
    { id: 17, name: "HUAWEI MatePad Air" },
    { id: 18, name: "HUAWEI MatePad Pro 11英寸 2024款" },
    { id: 19, name: "HUAWEI MatePad 11英寸 2023款" },
    { id: 20, name: "HUAWEI MatePad Pro 13.2英寸" },
    { id: 21, name: "HUAWEI MatePad 2023款" },
    { id: 22, name: "HUAWEI MateBook E" },
    { id: 23, name: "HUAWEI MatePad Pro 12.6英寸" },
    { id: 24, name: "HUAWEl MateBook E Go 性能版" },
  ])

  const [clickedItem, setClickedItem] = useState(null) // 添加一个状态记录被点击的项
  const [isUlVisible, setIsUlVisible] = useState(true)

  function keyUpHandle (e) {
    if (keywords.length > 0) {
      if (e.keyCode === 13) {
        if (keywords === "") {
          navigate("/home")
        } else if (keywords === "华为畅享70") {
          navigate("/phone1")
        } else if (keywords === "HUAWEI Mate 60 RS 非凡大师") {
          navigate("/phone2")
        } else if (keywords === "HUAWEI Mate 60 Pro+") {
          navigate("/phone3")
        } else if (keywords === "HUAWEI Mate 60 Pro") {
          navigate("/phone4")
        } else if (keywords === "HUAWEI Mate 60") {
          navigate("/phone5")
        } else if (keywords === "HUAWEI nova 11 SE") {
          navigate("/phone6")
        } else if (keywords === "HUAWEI P60 Art") {
          navigate("/phone7")
        } else if (keywords === "HUAWEl nova 11") {
          navigate("/phone8")
        } else if (keywords === "HUAWEI MateBook X i5") {
          navigate("/computer1")
        } else if (keywords === "HUAWEI MateBook X Pro 2023 微绒典藏版") {
          navigate("/computer2")
        } else if (keywords === "HUAWEI MateBook 14 2023") {
          navigate("/computer3")
        } else if (keywords === "HUAWEI MateBook 13s 2023") {
          navigate("/computer4")
        } else if (keywords === "HUAWEI MateBook 14s 2022") {
          navigate("/computer5")
        } else if (keywords === "HUAWEI Mate Book 16s 2023") {
          navigate("/computer6")
        } else if (keywords === "HUAWEI MateBook D 14 SE版 2024") {
          navigate("/computer7")
        } else if (keywords === "HUAWEI MateBook D 14 2023") {
          navigate("/computer8")
        } else if (keywords === "HUAWEI MatePad Air") {
          navigate("/tablet1")
        } else if (keywords === "HUAWEI MatePad Pro 11英寸 2024") {
          navigate("/tablet2")
        } else if (keywords === "HUAWEI MatePad 11英寸 2023") {
          navigate("/tablet3")
        } else if (keywords === "HUAWEI MatePad Pro 13.2英寸") {
          navigate("/tablet4")
        } else if (keywords === "HUAWEI MatePad 2023款") {
          navigate("/tablet5")
        } else if (keywords === "HUAWEI MateBook E") {
          navigate("/tablet6")
        } else if (keywords === "HUAWEI MatePad Pro 12.6英寸") {
          navigate("/tablet7")
        } else if (keywords === "HUAWEl MateBook E Go 性能版") {
          navigate("/tablet8")
        }
      }
    }
  }

  function searchHandle () {
    if (keywords === "") {
      navigate("/home")
    } else if (keywords === "华为畅享70") {
      navigate("/phone1")
    } else if (keywords === "HUAWEI Mate 60 RS 非凡大师") {
      navigate("/phone2")
    } else if (keywords === "HUAWEI Mate 60 Pro+") {
      navigate("/phone3")
    } else if (keywords === "HUAWEI Mate 60 Pro") {
      navigate("/phone4")
    } else if (keywords === "HUAWEI Mate 60") {
      navigate("/phone5")
    } else if (keywords === "HUAWEI nova 11 SE") {
      navigate("/phone6")
    } else if (keywords === "HUAWEI P60 Art") {
      navigate("/phone7")
    } else if (keywords === "HUAWEl nova 11") {
      navigate("/phone8")
    } else if (keywords === "HUAWEI MateBook X i5") {
      navigate("/computer1")
    } else if (keywords === "HUAWEI MateBook X Pro 2023 微绒典藏版") {
      navigate("/computer2")
    } else if (keywords === "HUAWEI MateBook 14 2023") {
      navigate("/computer3")
    } else if (keywords === "HUAWEI MateBook 13s 2023") {
      navigate("/computer4")
    } else if (keywords === "HUAWEI MateBook 14s 2022") {
      navigate("/computer5")
    } else if (keywords === "HUAWEI Mate Book 16s 2023") {
      navigate("/computer6")
    } else if (keywords === "HUAWEI MateBook D 14 SE版 2024") {
      navigate("/computer7")
    } else if (keywords === "HUAWEI MateBook D 14 2023") {
      navigate("/computer8")
    } else if (keywords === "HUAWEI MatePad Air") {
      navigate("/tablet1")
    } else if (keywords === "HUAWEI MatePad Pro 11英寸 2024") {
      navigate("/tablet2")
    } else if (keywords === "HUAWEI MatePad 11英寸 2023") {
      navigate("/tablet3")
    } else if (keywords === "HUAWEI MatePad Pro 13.2英寸") {
      navigate("/tablet4")
    } else if (keywords === "HUAWEI MatePad 2023款") {
      navigate("/tablet5")
    } else if (keywords === "HUAWEI MateBook E") {
      navigate("/tablet6")
    } else if (keywords === "HUAWEI MatePad Pro 12.6英寸") {
      navigate("/tablet7")
    } else if (keywords === "HUAWEl MateBook E Go 性能版") {
      navigate("/tablet8")
    }
  }

  const changeHandle = (e) => {
    const value = e.target.value
    setKeywords(value)
    setClickedItem(null) // 重置点击项的状态

    if (value.trim() === "") {
      setIsUlVisible(false) // 当输入框为空时隐藏ul
    } else {
      setIsUlVisible(true) // 当输入框有内容时显示ul
    }
  }


  // 点击li给输入框赋值
  const handleClick = (item) => {
    setKeywords(item.name)
    setClickedItem(item) // 设置被点击项的状态
  }

  const filteredData = data.filter((d) => {
    return d.name.toLowerCase().includes(keywords.toLowerCase())
  })

  return (
    <div id="searchForm">
      <input
        type="text"
        placeholder="请你输入内容"
        value={keywords}
        onKeyUp={keyUpHandle}
        onChange={changeHandle}
        id="search"
      />
      <input type="button" value="搜索" id="submit" onClick={searchHandle} />
      {keywords && (
        <ul id="searchul" style={{
          display: isUlVisible ? "block" : "none"
        }}>
          {filteredData.map((d) => (
            <li
              key={d.id}
              onClick={() => { handleClick(d); setIsUlVisible(false) }}
              style={{ display: clickedItem === d ? "none" : "block" }} // 根据点击项的状态来设置是否显示
            >
              {d.name}
            </li>
          ))}
        </ul>
      )}
    </div>
  )
}

export default SearchInput
